import React from "react";
import { User } from "./index";
import { Form, Input, Select } from "antd";

interface SearchPanel {
  users: User[];
  param: {
    name: string;
    personId: string;
  };
  setParam: (param: SearchPanel["param"]) => void;
}

export const SearchPanel = ({ param, setParam, users }: SearchPanel) => {
  return (
    <Form style={{ marginBottom: "2rem" }} layout={"inline"}>
      <Form.Item>
        <Input
          type="text"
          value={param.name}
          placeholder={"请输入项目名"}
          onChange={(event) =>
            setParam({
              ...param,
              name: event.target.value,
            })
          }
        />
      </Form.Item>
      <Form.Item>
        <Select
          value={param.personId}
          onChange={(value) =>
            setParam({
              ...param,
              personId: value,
            })
          }
        >
          <Select.Option value="">负责人</Select.Option>
          {users.map((user) => {
            return (
              <Select.Option value={user.id} key={user.id}>
                {user.name}
              </Select.Option>
            );
          })}
        </Select>
      </Form.Item>
    </Form>
  );
};
